<template>
  <div class="wagePayment">
   
    <div class="wagePayment">
        <div class="wagePayment_title">工资支付</div>
    </div>
 <div class="flexAround" style="margin-bottom:30px">
        <div class="part1_div">
          <div>累计支付工资（元）</div>
          <div>12223121.21</div>
        </div>
       
      </div>
   
    <div>
          <a-table :columns="columns" :data-source="data" @change="onChange"  
          >
          <div class="td_name" slot="month1" slot-scope="text" @click="wage_info">{{ text }}</div>
          
          </a-table>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioGroup: "1",
       columns: [
        {
          title: "年份",
          dataIndex: "name",
          align:"center"
        },
        {
          title: "累计支付",
          dataIndex: "peopleNum",
          align:"center"
        },
        {
          title: "1月",
          dataIndex: "1",
          align:"center",
          key: "month1",
          scopedSlots: { customRender: "month1" },
        },
        {
          title: "2月",
          dataIndex: "2",
          align:"center",
         
        },
        {
          title: "3月",
          dataIndex: "3",
          align:"center",
         
        },
        {
          title: "4月",
          dataIndex: "4",
          align:"center",
         
        },
        {
          title: "5月",
          dataIndex: "5",
          align:"center",
          
        },
        {
          title: "6月",
          dataIndex: "6",
          align:"center",
         
        },
        {
          title: "7月",
          dataIndex: "7",
          align:"center",
          
        },
        {
          title: "8月",
          dataIndex: "8",
          align:"center",
        
        },
        {
          title: "9月",
          dataIndex: "9",
          align:"center",
          
        },
        {
          title: "10月",
          dataIndex: "10",
          align:"center",
         
        }
        ,
        {
          title: "11月",
          dataIndex: "11",
          align:"center",
        
        }
        ,
        {
          title: "12月",
          dataIndex: "12",
          align:"center",
         
        }
      ],
      data: [
        {
          key: "1",
          name: "2021", 
          peopleNum: '250000',
          '1': "720000",
          '2': "720000",
          '3': "",
        },
        {
          key: "2",
         name: "2020", 
          peopleNum: '71250000',
          '1': "730000",
          '2': "776000",
          '3': "790000",
          '4': "730000",
          '5': "776000",
          '6': "790000",
          '7': "730000",
          '8': "776000",
          '9': "790000",
          '10': "730000",
          '11': "776000",
          '12': "790000",
        },
        
      ],
    };
  },
  methods:{
      onSearch() {},
    onChange(pagination, filters, sorter) {
      console.log("params", pagination, filters, sorter);
    },
    wage_info(){
        this.$router.push({path:'/salaryInformation'})
    }
  }
};
</script>

<style scoped>
    ::v-deep .ant-table-pagination.ant-pagination{
   display: none; }
.part1_div {
  width: 375px;
  height: 50px;
  text-align: center;
}
/* .part1_div div{
    width: 100%;
    text-align: center;
} */
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 29px;
}
.title{
    color:#1890ff ;
    font-size: 16px;
    margin-bottom: 10px;
}
.td_name{
    color: #1890ff;
    cursor: pointer;
}
/* .wagePayment{ */
    /* height: 45px;
    border-bottom: 1px solid #ccc; */
    /* margin-bottom: 30px; */
/* } */
.wagePayment_title{
    width: 90px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    color: #1890ff;
    border-bottom:2px solid #1890ff;
    text-align: center;
    margin-left: 30px;
}
</style>
